<template>
  <div>
    <div class="flexBetween">
      <div class="left">
        <a-directory-tree
          :tree-data="treeData"
          @select="onSelect"
          :default-expanded-keys="defaultexpandedKey"
          :default-selected-keys="defaultSelectedKey"
          v-if="treeData.length>0"
          @expand="onExpand"
          :show-icon="false"
        >
          <a-icon slot="switcherIcon" type="down" />

          <!-- <template slot="custom" slot-scope="item">
            <div>
              <span class="tree-view-left">{{ item.title }}</span>
            </div>
          </template>-->
        </a-directory-tree>
      </div>
      <div class="right">
        <!-- 顶部 -->
        <div class="top flexAround">
          <div class="top_content">
            <div class="top_content_title">在场人数</div>
            <div class="top_content_content">{{this.topInfo.inNumber}}</div>
          </div>
          <div class="top_content">
            <div class="top_content_title">累计人数</div>
            <div class="top_content_content">{{this.topInfo.allNumber}}</div>
          </div>
          <div class="top_content">
            <div class="top_content_title" style="position:relative">
              班组负责人
              <span
                style="color:#1890ff;margin-left:10px;position:absolute;left:60%;cursor: pointer;"
                @click="clickSet"
              >设置</span>
            </div>
            <div class="top_content_content">{{this.topInfo.leaderName}}</div>
          </div>
        </div>

        <!-- 中间内容 -->
        <div class="content">
          <div class="center flexBetween">
            <div class="center_title">人员列表</div>
            <div>
              <a-radio-group v-model="radioModel" @change="onChange">
                <a-radio-button value="0">全部</a-radio-button>
                <a-radio-button value="1">在场</a-radio-button>
                <a-radio-button value="2">离场</a-radio-button>
              </a-radio-group>
              <a-input-search
                placeholder="请输入姓名查询"
                style="width: 200px;margin-left:20px"
                v-model="fullName"
                @search="onSearch"
              />
            </div>
          </div>
          <!-- 表格 -->
          <div class="atable">
            <a-table :columns="columns" :data-source="data" :pagination="false">
              <span slot="outTime" slot-scope="text, record">
                <span v-if="record.inOutStatus==2">{{text}}</span>
              </span>
              <span slot="action" slot-scope="text, record">
                <a style="color:#1890FF" @click="onEdit(text, record)">详情</a>
              </span>
            </a-table>
          </div>

          <!-- 分页 -->
          <div class="pagination flexBetween">
            <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
            <div>
              <a-pagination
                :current="current"
                :page-size-options="pageSizeOptions"
                :total="this.configFun.pageNum(total)"
                show-size-changer
                :pinspector-size="pageSize"
                @showSizeChange="onShowSizeChange"
                @change="pageChange"
                show-quick-jumper
              >
                <template slot="buildOptionText" slot-scope="props">
                  <span>{{ props.value }}条/页</span>
                </template>
              </a-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 对话框 -->
    <div>
      <a-modal
        v-model="visible"
        title="设置班组负责人"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
      >
        <a-form-model ref="ruleForm" :model="form" v-if="visible">
          <!-- :label-col="labelCol"
          :wrapper-col="wrapperCol"-->
          <a-form-model-item ref="charge" label="班组负责人" prop="charge">
            <a-select
              :size="size"
              placeholder="请选择"
              :default-value="[]"
              @change="handleChange"
              @popupScroll="popupScroll"
              show-search
              option-filter-prop="children"
              v-model="chargeModel"
            >
              <a-select-option v-for="item in charge" :key="item.id">{{ item.value}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item ref="charge" label="班组负责人账号" prop="user">
            <!-- v-if="this.userDefault.length" -->
            <a-select
              :size="size"
              placeholder="请选择"
              :default-value="userDefault"
              @change="handleChangeUser"
              @popupScroll="popupScrollUser"
              show-search
              option-filter-prop="children"
              v-model="userModel"
            >
              <a-select-option v-for="item in user" :key="item.id">{{ item.value}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { unitTeamQuery, queryTeamDetail } from '@/api/laborUnitTeam'
import { teamChargeGet, teamChargeSet, SysUser } from '@/api/laborUnitInfo'
import moment from 'moment'
import { mapGetters } from 'vuex'
const columns = [
  { title: '人员编码', dataIndex: 'code', key: 'code' },
  { title: '姓名', dataIndex: 'fullName', key: 'fullName', align: 'center' },
  { title: '岗位', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '施工班组', dataIndex: 'departmentName', key: 'departmentName', align: 'center' },
  { title: '进场时间', dataIndex: 'inTime', key: 'inTime', align: 'center' },
  { title: '离场时间', dataIndex: 'outTime', key: 'outTime', align: 'center', scopedSlots: { customRender: 'outTime' } },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '2',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '3',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '4',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '5',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  }
]
const treeData = [
  {
    title: '江苏国骄建设有限公司',
    key: '0-0',
    scopedSlots: {
      title: 'custom'
    },
    disabled: true,
    children: [
      {
        title: '结构队',
        key: '0-0-0',
        scopedSlots: {
          title: 'custom'
        }
      },
      {
        title: '大临工程',
        key: '0-0-1',
        scopedSlots: {
          title: 'custom'
        }
      }
    ]
  },
  {
    title: '江苏路通建筑劳务有限公司',
    key: '0-1',
    disabled: true,
    scopedSlots: {
      title: 'custom'
    },
    children: [
      {
        title: '文明施工班组',
        key: '0-1-0',
        scopedSlots: {
          title: 'custom'
        }
      }
    ]
  },
  {
    title: '江苏路通建筑劳务有限公司',
    key: '0-2',
    disabled: true,
    scopedSlots: {
      title: 'custom'
    },
    children: [
      {
        title: '文明施工班组',
        key: '0-2-0',
        scopedSlots: {
          title: 'custom'
        }
      }
    ]
  }
]
export default {
  data() {
    return {
      radioModel: '0',
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      columns,
      data: [],
      treeData: [],
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      visible: false,
      form: {
        charge: []
      },
      size: 'default',
      charge: [],
      selectKey: '',
      defaultexpandedKey: [],
      defaultSelectedKey: [],
      teamId: '',
      topInfo: {},
      fullName: '',
      selectData: '',
      user: '',
      userDefault: [],
      userModel: '',
      chargeModel: '',
      chargeId: '',
      userId: ''
      // getIcon: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  // created() {
  //   this.getCharge()
  // },
  methods: {
    moment,
    onChange(e) {
      // console.log(this.radioModel)
      this.current = 1
      // this.pageSize = 10
      this.teamDetail()
    },
    onSearch(value) {
      // this.current = 1
      // console.log(value)
      this.getTotal()
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTotal(pageSize, current)
    },
    //搜索时获取满足的有多少页
    getTotal(val, current) {
      let size = ''
      let page = ''
      if (val) {
        size = val
      } else {
        size = this.pageSize
      }
      if (current) {
        page = current
      } else {
        page = this.current
      }
      let data = {
        likeFullName: this.fullName,
        inOutStatus: this.radioModel,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        teamId: this.teamId
      }
      queryTeamDetail(data).then((res) => {
        let data = res.data.data
        this.total = data.total
      //   console.log(Math.ceil(this.total/size));
      // console.log(page);
        if (Math.ceil(this.total / size) < page) {
          this.current = 1
        } else {
          this.current = page
        }

        this.pageSize = size
        this.teamDetail()
      })
    },
    //表格数据
    teamDetail() {
      let data = {
        likeFullName: this.fullName,
        inOutStatus: this.radioModel,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        teamId: this.teamId
      }
      this.data = []
      queryTeamDetail(data).then((res) => {
        let data = res.data.data
        this.topInfo = data
        this.getCharge()
        data.personVOList.forEach((item) => {
          item.key = item.id
          item.inTime = moment(item.inTime).format('YYYY-MM-DD')
          if (item.outTime != null) {
            item.outTime = moment(item.outTime).format('YYYY-MM-DD')
          }
        })
        this.data = data.personVOList
        this.chargeModel = data.leaderName
        this.userModel = data.leaderUserFullName
        // console.log(this.user);
        if (data.total == 0) {
          this.total = 1
        } else {
          this.total = data.total
        }
      })
    },
    clickSet() {
      this.visible = true
      this.chargeModel = this.topInfo.leaderName
      this.chargeId = this.topInfo.leaderPersonId
      this.userId = this.topInfo.leaderUserId
      // let _this=this
      //   let findUser = this.user.find(function(data) {
      //     return data.value == _this.chargeModel
      //   })
      //   if (findUser == undefined) {
      //     this.userModel = ''
      //   } else {
      //     this.userModel = findUser.value
      //   }
    },
    handleOk() {
      let data2 = {
        id: this.teamId,
        leaderOrgPersonId: this.chargeId,
        leaderUserId: this.userId
      }
      teamChargeSet(data2).then((res) => {
        this.visible = false
        this.$message.success('设置成功')
        this.teamDetail()
      })
      this.visible = false
    },
    handleChange(value) {
      this.chargeId = value
      //  console.log(this.charge);
      let _this = this
      let findObj = this.charge.find(function(obj) {
        return obj.label == value
      })
      let findUser = _this.user.find(function(data) {
        return data.value == findObj.value
      })
      if (findUser == undefined) {
        this.userModel = ''
      } else {
        this.userId = findUser.id
        this.userModel = findUser.value
      }
    },
    popupScroll() {
      // console.log('popupScroll');
    },
    handleChangeUser(value) {
      this.userId = value
      // console.log(`Selected: ${value}`);
    },
    popupScrollUser() {
      // console.log('popupScroll');
    },
    onExpand() {
      // console.log('4444')
    },
    onSelect(selectedKeys, info) {
      // this.selectKey = selectedKeys
      // console.log(selectedKeys, info)

      this.selectKey = selectedKeys[0]

      // console.log(this.selectKey);
      this.teamId = this.selectKey
      this.teamDetail()
    },
    getTree() {
      unitTeamQuery().then((res) => {
        let data = res.data.data
        if (data.length != 0) {
          data.forEach((item) => {
            item.key = item.labourOrgId
            item.title = item.labourOrgName
            item.scopedSlots = {
              title: 'custom'
            }
            item.disabled = true
            item.children = []
            if (item.teamVOList.length > 0) {
              item.children = []
              item.teamVOList.forEach((res) => {
                res.key = res.id
                res.title = res.name
                res.scopedSlots = {
                  title: 'custom'
                }
              })
              item.children = item.teamVOList
            }
          })
          // console.log(this.$route.query.selectLi);

          if (this.$route.query.selectLi) {
            this.defaultexpandedKey[0] = this.$route.query.selectLi
            this.defaultSelectedKey[0] = this.$route.query.teamId
            this.teamId = this.$route.query.teamId
            // console.log(this.teamId);

            this.teamDetail()
          } else {
            this.defaultexpandedKey.push(data[0].key)
            if (data[0].children.length > 0) {
              this.defaultSelectedKey[0] = data[0].children[0].key
              this.teamId = this.defaultSelectedKey[0]
              // console.log(this.teamId);

              this.teamDetail()
            } else {
              this.teamId = ''
            }
          }

          this.treeData = data
        }

        // console.log(this.defaultSelectedKey[0])

        // console.log( this.treeData );
      })
    },
    getCharge() {
      let data = {
        code: this.topInfo.code,
        orgId: this.userInfo.orgId,
        page: 0,
        size: 0
      }
      teamChargeGet(data).then((res) => {
        // console.log(res.data.data)
        let charge = res.data.data
        charge.forEach((item) => {
          item.label = item.id
          item.value = item.fullName
        })
        this.charge = charge
      })
      SysUser(data).then((res) => {
        let user = res.data.data
        user.forEach((item) => {
          item.label = item.id
          item.value = item.fullName
        })
        this.user = user
      })
    },

    //详情
    onEdit(text) {
      //   console.log(text)
     
      const { href } = this.$router.resolve({
        path: `/personnelInformationLabor/${text.id}`,
        query: { id: text.id }
      })

      window.open(href, '_blank')
    }
  },
  mounted() {
    // this.defaultSelectedKey[0]=this.$route.query.selectLi
    this.getTree()
  }
}
</script>

<style scoped>
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding: 40px 0px;
}
.center {
  margin-bottom: 20px;
}
.content {
  background: #fff;
  /* padding: 15px 30px; */
  margin-bottom: 15px;
  width: 100%;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ededed;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.center_title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
.atable {
  margin-bottom: 20px;
}
.left {
  width: 22%;
  /* margin-right: 10px; */
  background: #fff;

  min-height: 100%;
  padding: 20px 20px 0 20px;
}
.right {
  width: calc(78% - 1px);
  height: 100%;
  /* min-height: 600px; */
  /* height: 100vh; */
  background: #fff;
  padding: 15px 30px;
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  color: black;
}
.treeView {
  /* width: 100%; */
  /* background: red; */
  /* color: #fff; */
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  width: 100%;
}
::v-deep li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span {
  color: #000;
  cursor: pointer;
}
::v-deep li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher),
li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper {
  cursor: pointer;
}
::v-deep .ant-tree li {
  font-size: 14px;
}
::v-deep .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper,
.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper {
  /* height:40px; */
  line-height: 40px;
  width: 95%;
}

::v-deep .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper > span,
.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper > span {
  line-height: 40px;
}
::v-deep .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper::before,
.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper::before {
  height: 40px;
  line-height: 40px;
}
::v-deep .ant-tree.ant-tree-directory > li span.ant-tree-switcher,
.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-switcher {
  line-height: 40px;
  height: auto;
}

::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  height: auto;
}
::v-deep .ant-tree-node-content-wrapper {
  white-space: normal;
  /* max-width: 100%; */
}
</style>
